<template>
	<div id="admin_content" class="admin_content">
		<div class="t icbc_defaultTextColor">机构管理员账号注册</div>
		<!-- <div class="password-container">
			<p>为了保障您的账户安全，请设置一个强密码：</p>
			<ul>
				<li>密码长度至少8个字符。</li>
				<li>密码必须包含以下至少两种字符的组合：</li>
				<ul>
					<li>至少一个小写字母。</li>
					<li>至少一个大写字母。</li>
					<li>至少一个数字。</li>
					<li>至少一个特殊字符：`~!@#$%^&*()-_=+\|[{}];:'",&lt;.&gt;/?</li>
				</ul>
				<li>密码不能与账号相同。</li>
			</ul>
		</div> -->
		<div id="register_view" class="left_view">
			<div class="item" style="margin-top: 40px">
				<div class="left">
					<img src="@/assets/img/icon/name.png" class="img" />
				</div>
				<input placeholder="请输入管理员姓名" class="input" v-model="name" />
			</div>

			<!-- <div class="item" style="margin-top: 40px; margin-left: 20px">
				<div class="left">
					<img src="@/assets/img/icon/pwd.png" class="img" />
				</div>
				<input placeholder="请输入管理员密码" class="input" type="password" v-model="pwd" />
			</div> -->
			<div class="item" style="margin-top: 40px; margin-left: 20px">
				<div class="left">
					<img src="@/assets/img/icon/org.png" class="img" />
				</div>
				<input placeholder="请输入管理员机构名称" class="input" v-model="org" />
			</div>

			<div class="submit" @click="registerAdmin"> 立即注册 </div>
			<!--<div class="reload" @click="clearData">-->
			<!--重新填写-->
			<!--</div>-->
		</div>
		<div id="account_list" class="right_view">
			<div class="table">
				<!-- <Table border :columns="dataColumns" :data="data"></Table> -->
				<Table :tableData="data">
					<template v-slot:btn>
						<el-table-column width="500px" align="center" label="编辑">
							<template slot-scope="scope">
								<el-button v-if="scope.row.status === '有效'" class="button" size="mini" @click="disabeleAccount(scope.$index, 'admin')">失效</el-button>
								<el-button v-else class="button" size="mini" @click="reAbleAccount(scope.$index, 'admin')">恢复</el-button>
								<el-button v-if="scope.row.isInitPwd === 'Y'" class="button" size="mini" @click="showPwdView(scope.$index)">初始密码</el-button>
								<el-button v-if="scope.row.isLockedByPasswordError === 'Y'" class="button" size="mini" @click="unlockAccount(scope.$index, scope.row)">解锁帐号</el-button>
							</template>
						</el-table-column>
					</template>
				</Table>
				<br />
				<PageSize :pages="page" @changePageSize="changePageSize" @changeCurrentPage="changePage" />
			</div>
		</div>
		<!-- <ChangePassword
			v-show="showChangePwd"
			:show="showChangePwd"
			:userId="curAccount.id"
			@close="
				() => {
					showChangePwd = false;
				}
			"
		/> -->
		<el-dialog title="温馨提示" :visible.sync="copyPwdDialogVisible" width="50%" append-to-body="true">
			<span>密码:{{ dialogPassword }}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="copyPassword">复制</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { superAccountRegister, getAdminUserList, updateAccountInfo, adminUpdateAccountInfo, superUnlockAccount } from '../../api/api';
import _ from 'lodash';
import { jwtDecode } from 'jwt-decode';
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
import ChangePassword from './ChangePassword.vue';
export default {
	name: 'Super',
	components: {
		Table,
		PageSize,
		ChangePassword
	},
	data() {
		return {
			dialogPassword: '', // 初始化密码
			copyPwdDialogVisible: false, // 显示密码
			token: localStorage.getItem('superAdminToken'),
			name: null,
			pwd: null,
			org: null,
			page: {
				page: 1,
				pageSize: 10,
				total: 0,
				role: 'agent'
			},
			data: {
				tableHead: [
					{
						label: '用户名',
						// width:100,
						prop: 'userName'
					},
					{
						label: '状态',
						// width:100,
						prop: 'status'
					},
					{
						label: '机构',
						// width:100,
						prop: 'org'
					}
				],
				tableConent: [],
				showIndex: false
			},

			showChangePwd: false,
			curAccount: {}
		};
	},

	mounted() {
		this.getAccountList();
	},
	methods: {
		reAbleAccount(index, role) {
			let name, userId;
			name = this.data.tableConent[index].userName;
			userId = this.data.tableConent[index].id;
			let self = this;

			this.$confirm(`用户名:${name}`, '恢复当前用户账号正常使用?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					self.updateAccountDisable(userId, index, role, 'N');
				})
				.catch(() => {});
		},
		/**
		 * 解锁帐号
		 * @param index
		 */
		unlockAccount(index, row) {
			console.log('unlockAccount', index, row);
			this.$Spin.show();
			superUnlockAccount(row.id)
				.then(res => {
					this.$Spin.hide();
					this.getAccountList();
					this.$message({
						type: 'success',
						message: '账号解锁成功!'
					});
				})
				.catch(err => {
					console.error('unlockAccount error ', err);
					this.$Spin.hide();
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},

		/*账号失效*/
		disabeleAccount(index, role) {
			let name, userId;
			name = this.data.tableConent[index].userName;
			userId = this.data.tableConent[index].id;
			let self = this;

			this.$confirm(`用户名:${name}`, '失效当前用户?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					self.updateAccountDisable(userId, index, role, 'Y');
				})
				.catch(() => {});
		},

		updateAccountDisable(userId, index, role, status) {
			let params = [
				{ op: 'replace', path: '/isDisabled', value: status } // 设置该用户是否失效   Y/失效  N/没有失效
			];
			let self = this;
			let data = {};
			data.userId = userId;
			data.params = params;
			adminUpdateAccountInfo(data)
				.then(function () {
					self.$message.success('操作成功');
					if (status === 'Y') {
						self.data.tableConent[index].status = '无效';
					} else {
						self.data.tableConent[index].status = '有效';
					}
				})
				.catch(function (error) {
					let response = error.response;
					self.$requestApiError(response, () => {
						self.$router.push('/super');
					});
				});
		},

		showPwdView(index) {
			this.curAccount = this.data.tableConent[index];
			console.log('index user', index, this.curAccount);
			// console.warn('showPwdView ', this.curAccount);
			this.dialogPassword = this.curAccount.initPwd;
			this.copyPwdDialogVisible = true;
		},

		copyPassword() {
			console.log('copy password,', this.dialogPassword);
			this.copyPwdDialogVisible = false;
			navigator.clipboard &&
				navigator.clipboard
					.writeText(this.dialogPassword)
					.then(() => {
						this.$message.success('复制成功');
					})
					.catch(() => {
						this.$message.error('复制失败');
					});
		},

		changePage(page) {
			console.log(page);
			this.page.page = page;
			this.getAccountList();
		},
		changePageSize(pagesize) {
			console.log(pagesize);
			this.page.pageSize = pagesize;
			this.getAccountList();
		},

		getAccountList() {
			let self = this;
			let data = {};
			data.page = this.page.page;
			data.pageSize = this.page.pageSize;
			getAdminUserList(data)
				.then(function (resp) {
					console.log(resp);
					if (resp.status === 200) {
						if (resp.data.code === 200) {
							self.data.tableConent = []; //数据清空
							self.page.total = resp.data.data.count;
							let currentData = resp.data.data.data;
							_.forEach(currentData, function (adminInfo) {
								self.data.tableConent.push({
									id: adminInfo.id,
									userName: adminInfo.userName,
									status: adminInfo.isDisabled === 'N' ? '有效' : '无效',
									org: adminInfo.org,
									isDisabled: adminInfo.isDisabled,
									isInitPwd: adminInfo.isInitPwd,
									initPwd: adminInfo.initPwd,
									isLockedByPasswordError: adminInfo.isLockedByPasswordError
								});
							});
						} else {
							self.$message.error(resp.data.description);
						}
					}
				})
				.catch(function (error) {
					console.log(error);
					self.$requestApiError(() => {
						self.$router.push('/super');
					});
				});
		},

		registerAdmin() {
			if (this.name === null || this.name === '') {
				this.$message.info('请输入用户名');
				return;
			} else if (this.pwd === null || this.pwd === '') {
				// this.$message.info('请输入密码');
				// return;
			} else if (this.org === null || this.org === '') {
				this.$message.info('请输入机构名称');
				return;
			} else if (/[\u4E00-\u9FA5]/g.test(this.org)) {
				this.$message.info('机构名不能输入为中文');
				return;
			}
			//customerLevel,isRobot,profile
			let data = { profile: {} };
			data.name = this.name;
			data.pwd = '111';
			data.org = this.org;
			data.role = 'admin';
			data.isRobot = false;
			data.customerLevel = '';
			data.token = this.token;
			let self = this;
			self.$Spin.show();
			superAccountRegister(data)
				.then(function (resp) {
					if (resp.status === 200) {
						if (resp.data.code === 200) {
							self.$notify({
								title: '温馨提示',
								message: '注册成功',
								type: 'success'
							});
							self.getAccountList();
							self.name = self.pwd = self.org = null;
						} else {
							self.$message.error(resp.data.description);
						}
					}
					self.$Spin.hide();
				})
				.catch(function (error) {
					console.log('register admin account error', error);
					self.$requestApiError(error, () => {
						self.$router.push('/super');
					});
					self.$Spin.hide();
				});
		},
		clearData() {
			this.name = this.pwd = null;
		}
	}
};
</script>

<style lang="less" scoped>
.admin_content {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: #00ff00; */
	background: url('@/assets/img/upload/adminbg.png') no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	overflow-y: auto;
	background-size: cover;
}

.left_view {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 90%;
	flex-wrap: wrap;
}

.right_view {
	width: 90%;
	margin-top: 20px;
	flex: 1;
	height: 60%;
}

.t {
	height: 40px;
	font-size: 20px;
	font-family: STSongti-SC-Regular, STSongti-SC, serif;
	font-weight: 400;
	/*color:rgba(0,206,216,1);*/
	line-height: 40px;
	margin-top: 20px;
	/*border-bottom: 3px solid rgba(0,206,216,1);*/
}

.item {
	width: 300px;
	height: 49px;
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
	border: 1px solid rgba(210, 216, 226, 1);
	margin-top: 20px;
	position: relative;
	box-sizing: content-box;
}

.left {
	width: 70px;
	height: 48px;
	background: rgba(245, 247, 250, 1);
	box-sizing: content-box;
	border-right: 1px solid rgba(210, 216, 226, 1);
}

.img {
	position: absolute;
	left: 25px;
	top: 14px;
}

.input {
	position: absolute;
	left: 70px;
	top: 0px;
	height: 48px;
	width: 200px;
	outline: none;
	border: 0px;
	padding-left: 10px;
}

.submit {
	width: 200px;
	height: 48px;
	border-radius: 5px;
	font-size: 15px;
	color: rgba(255, 255, 255, 1);
	line-height: 48px;
	text-align: center;
	cursor: pointer;
	margin-left: 20px;
	margin-top: 40px;
	background-color: deepskyblue;
}

.reload {
	width: 200px;
	height: 36px;
	border-radius: 5px;
	font-size: 16px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 36px;
	text-align: center;
	margin-top: 30px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(210, 216, 226, 1);
	cursor: pointer;
}
.button {
	color: rgb(99, 132, 254);
}

.password-container {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	width: 400px;
}

h1 {
	color: #333333;
}

p {
	color: #666666;
	line-height: 1.5;
}

ul {
	list-style-type: disc;
	margin-left: 20px;
}
</style>
